import React from 'react'
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation'
import {BottomTabBar} from 'react-navigation-tabs';
import { connect } from 'react-redux'
import { Button, Text, View, StyleSheet } from 'react-native';

import Read from '../src/page/Read'
import Collection from '../src/page/Collection'
import Tools from '../src/page/Tools'
import Mine from '../src/page/Mine'
import PhoneHeader from './PhoneHeader'

import Welcome from '../src/page/Welcome'
import Ionicons from 'react-native-vector-icons/Ionicons'
import CustomKeyPage from '../src/page/CustomKeyPage'
import CustomHeader from './CustomHeader'
import SortHeader from './SortHeader'
import Sort from '../src/page/SortKeyPage'

import About from '../src/page/about/AboutPage'

import ReadDetail from '../src/page/ReadDetail'
import SearchKey from '../src/page/SearchKey'
import SearchHeader from './SearchHeader'
import ReadHeader from './ReadHeader'

import CodePushPage from '../src/page/CodePushPage'

class TabBarComponent extends React.Component {
  constructor(props) {
      super(props);
  }

  render() {
      return <BottomTabBar
          {...this.props}
          activeTintColor={this.props.themeColor}
      />
  }
}

const Tab = connect((state)=> ({themeColor: state.theme.themeColor}), null)(TabBarComponent)

const AppTabNavigator = createBottomTabNavigator({
  Read: {
    screen: Read,
    navigationOptions: {
      tabBarLabel: 'read',
      tabBarIcon: ({ tintColor, focused }) => (
        <Ionicons
          name={focused ? 'ios-home' : 'ios-home'}
          size={26}
          style={{ color: tintColor }}
        />
      ),
      tabBarOnPress: (obj)=> {
        obj.navigation.navigate('Read', {change: true})
      }
    },
  },
  Collection: {
    screen: Collection,
    navigationOptions: {
      tabBarLabel: 'Collection',
      tabBarIcon: ({tintColor, focused}) => (
        <Ionicons
          name = {focused?'md-star':'md-star'}
          size={16}
          style={{color: tintColor}}
        />
      ),
      tabBarOnPress: (obj)=> {
        obj.navigation.navigate('Collection', {change: true})
      },
      title: 'Collection'
    }
  },
  Tools: {
    screen: Tools,
    navigationOptions: {
      tabBarLabel: 'Tools',
      tabBarIcon: ({tintColor, focused}) => (
        <Ionicons
          name = {focused?'md-grid':'md-grid'}
          size={16}
          style={{color: tintColor}}
        />
      )
    }
  },
  Mine: {
    screen: Mine,
    navigationOptions: {
      tabBarLabel: 'Mine',
      tabBarIcon: ({tintColor, focused}) => (
        <Ionicons
          name = {focused?'ios-person':'ios-person'}
          size={16}
          style={{color: tintColor}}
        />
      )
    }
  },
}, {
  tabBarComponent: props => {
    return <Tab {...props}/>
  }
})


export default AppStackNavigator = createStackNavigator({
  Welcome: {
    screen: Welcome,
    navigationOptions: {
      header: null,
      headerBackTitle: null
    }
  },
  TabNav: {
    screen: AppTabNavigator,
    navigationOptions: ({ navigation }) => (
      { // phoneHeader为自定义React组件
        header: <PhoneHeader navigation={navigation}/>
      }
    )
  },
  Custom: {
    screen: CustomKeyPage,
    navigationOptions: ({ navigation }) => ({
      header: <CustomHeader navigation={navigation} />
    }),
  },
  About: {
    screen: About,
    navigationOptions: {
      header: null
    }
  },
  Sort: {
    screen: Sort,
    navigationOptions: ({ navigation }) => ({
      header: <SortHeader navigation={navigation} />
    }),
  },
  ReadDetail: {
    screen: ReadDetail,
    navigationOptions: ({ navigation }) => ({
      header: <ReadHeader navigation = {navigation}/>
    }) 
  },
  Search: {
    screen: SearchKey,
    navigationOptions: ({navigation}) => ({
      header: <SearchHeader navigation={navigation}></SearchHeader>
    })
  },
  CodePush: {
    screen: CodePushPage
  }
},
{
  initialRouteName: 'Welcome',
})
